<template>

    <div style="padding-top:20px">
        <div style="text-align:center;margin:0px auto">{{ businessName }}</div>
        <div class="L-optionBox">

            <van-uploader v-model="filelist" :after-read="handleUpload" accept="*" multiple
                :before-delete="handleDelete">
                <div class="upload-block">
                    <i class="el-icon-upload" style="color:#C0C4CC;font-size: 40px;"></i>
                    <div style="margin-top: 10px;color:#409EFF;font-size: 14px;">点击上传</div>
                </div>
            </van-uploader>
        </div>


        <van-tabbar safe-area-inset-bottom>

            <van-tabbar-item @click="handleBusinessCancle">取消</van-tabbar-item>

            <van-tabbar-item @click="handleSubmit">提交</van-tabbar-item>

        </van-tabbar>

    </div>
</template>

<script setup>
import { reactive, onMounted, ref, defineAsyncComponent, computed, watch } from "vue";
import { showLoadingToast, closeToast, showToast } from "vant";
import { apiConfigurable } from "@/request/api/api";

const props = defineProps({
    handleBusinesSubmit: {
        type: Function,
        default: () => { }
    },
    handleBusinessCancle: {
        type: Function,
        default: () => { }
    },
    businessName: {
        type: String,
        default: ""
    },
    idobject: {
        type: String,
        default: ""
    },
    headObjectId: {
        type: String,
        default: ""
    },
    headObject: {
        type: String,
        default: ""
    },

},)

const filelist = ref([])
const files = ref([])


function handleDelete(delitem) {
    console.log("delitem", delitem)


    files.value = files.value.filter(item => {

        return item.oldname !== delitem.file.name
    })

    return true

}
function handleSubmit() {

    if (files.value.length === 0) {
        showToast("请选择!")
        return
    }
    const fpuploadnewname = files.value.reduce((pre, item) => {
        return `${pre}${item.newname};`
    }, '')


    let data = {
        fpuploadnewname: fpuploadnewname,
        [`${props.idobject}_${props.headObject}code`]: props.headObjectId

    }
    showLoadingToast({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "上传中...",
    });

    const api = props.businessName === "选择发票" ? props.idobject + '.uploadimgsave.do' : props.idobject + '.scxysave.do';
    apiConfigurable(api, data).then(res => {
        if (res.code === 0) {
            let des = res.message
            if (des.slice(-4) === "添加成功") {
                showToast(des.slice(-4))
                setTimeout(() => {
                    props.handleBusinesSubmit()
                }, 1000)


            } else {
                showToast(des)
            }

        }
    }).catch(res => {

    }).finally(() => {
        setTimeout(() => {
            closeToast()
        }, 2000)

    })

}


function handleUpload(file) {
    // 上传
    let deviceFile = [];
    let formData = new FormData();
    if (Array.isArray(file)) {
        deviceFile = file;
    } else {
        deviceFile.push(file);
    }

    for (let i = 0; i < deviceFile.length; i++) {
        formData.append("file" + i, deviceFile[i].file, deviceFile[i].name);
    }
    showLoadingToast({
        duration: 0,
        forbidClick: true,
        message: "上传中...",
    });



    const api = props.businessName === "上传发票" ? "upload.imagedo" : "upload.filedo";


    apiConfigurable(api, formData).then((res) => {
        if (res.code === 0) {
            let fileInfo = res.data

            const newnameList = fileInfo[0].newname.split(';')
            const oldnameList = fileInfo[0].oldname.split(';')
            const files1 = newnameList.map((item, index) => {
                const file = { newname: item, oldname: oldnameList[index] }
                return file
            })

            files.value = [...files.value, ...files1]
            console.log("files.value", files.value)

            showToast('上传成功')

        }

    }).finally(() => {
        closeToast();
    });
}


</script>

<style scoped>
.L-optionBox {
    /* box-sizing: border-box; */
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.L-optionBox .L-upload-btn {
    width: 95vw;
    margin: 10px auto;
}


.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}

.upload-demo {
    width: 100%;
    height: 250px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.L-upload-btn {
    width: 95vw;
    margin: 10px auto;
}

.upload-block {
    width: 95vw;
    height: 160px;
    border: 1px #ccc dashed;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
    background-color: #f4f4f4;
}
</style>